<template>
  <base-breadcrumb :title="title">
    <!-- 品质工程新六项措施计划详情 -->
    <div id="base-breadcrumb" style="position: relative">
      <!-- 项目信息 -->
      <a-spin :spinning="loading">
        <a-card :bordered="false" class="mb20">
          <title-name title="项目信息" />
          <a-form-model ref="ruleForm" :model="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <a-row>
              <a-col :xs="24" :sm="24" :md="24" :lg="24">
                <a-form-model-item label="所属单位" prop="branchCompanyId">
                  <BaseInput v-model="form.viewName" disabled />
                </a-form-model-item>
              </a-col>
              <a-row>
                <a-col :xs="24" :sm="24" :md="24" :lg="24">
                  <a-form-model-item :label-col="{ span: 2 }" :wrapper-col="{ span: 6 }" label="项目基本情况" prop="projectBasicSituation">
                    <BaseInput v-model="form.projectBasicSituation" type="textarea" disabled />
                  </a-form-model-item>
                </a-col>
              </a-row>
            </a-row>
          </a-form-model>
        </a-card>
        <!-- 表格 -->
        <a-card id="tableBox" :bordered="false" style="margin-bottom: 50px">
          <title-name title="六项措施实施计划" />
          <service-export-mould
            class="ml12"
            :isButton="true"
            :serviceiUrl="qualityApiUrl"
            buttonType="default"
            :url="'/quality/six-measures/excels/' + id"
            buttonText="全部导出"
          ></service-export-mould>
          <div style="margin: 20px; margin-right: 0;" v-for="(val, key) in details" :key="key">
            <title-name :title="key"></title-name>
            <!-- 表格 -->
            <a-table bordered :data-source="val" :columns="columns" :rowKey="record => record.id + record.sixMeasuresId" size="default" style="width: 100%; overflow-x: auto;" :pagination="false">
              <template slot="implementationTime" slot-scope="text, record">
                {{ record.implementationTimeStart }} - {{ record.implementationTimeEnd }}
              </template>
            </a-table>
          </div>
        </a-card>
      </a-spin>
      <!-- 页脚操作栏 -->
      <div class="btn_box page-btn-right-top">
        <BasePrintButton
          :before-print-fn="beforePrintFn"
        />
        <a-button class="ml12" type="primary" @click="handleActiveClose">
          关闭
        </a-button>
      </div>
    </div>
  </base-breadcrumb>
</template>

<script>
import { qualityApiUrl } from '@/api/config.js'
import { sixMeasures, print } from '@/api/quality/quality' // api
import BaseEditPage from '@/views/baseEditPage' // 编辑详情页基础配置
import BasePrintButton from '@/components/BasePrintButton' // 打印按钮
import ServiceExportMould from '@/components/ServiceExportMould'
const columns = [
  {
    title: '六项举措内容',
    dataIndex: 'sixMeasures',
    width: '230px'
  },
  {
    title: '实施部位',
    dataIndex: 'implementationSite',
    width: '230px',
  },
  {
    title: '实施要点',
    dataIndex: 'implementationPoints',
    width: '230px',
  },
  {
    title: '实施时间',
    dataIndex: 'implementationTime',
    width: '230px',
    scopedSlots: { customRender: 'implementationTime' }
  },
  {
    title: '责任人',
    dataIndex: 'dutyPeopleName',
    width: '230px',
  },
  {
    title: '备注',
    dataIndex: 'remarks',
    width: '230px',
    scopedSlots: { customRender: 'remarks' }
  }
]
export default {
  name: 'a' + Date.now(),
  extends: new BaseEditPage(),
  components: {
    BasePrintButton,
    ServiceExportMould
  },

  data() {
    this.columns = columns
    return {
      printLoading: false,
      qualityApiUrl,
      loading: false,
      editModel: 0,
      id: '',
      details: {},
      form: {
        viewName: ''
      },
      sixMeasuresPlan: [],
      titles: ['品质工程新六项措施计划查看', '品质工程新六项措施计划编辑', '品质工程新六项措施计划添加', '品质工程新六项措施计划调整'],
      businessId: null
    }
  },
  created() {
    this.initInfo()
  },
  methods: {
    // 打印
    beforePrintFn() {
      // 批量打印 templateCode: CSCEC8XN-EQ-B30621，id: 措施计划id
        return print.generateBatchDoc({id:this.id, templateCode: 'CSCEC8XN-EQ-B30621'}).then((res) => {
          return res.data.content
        })
    },
    /**
     * 关闭
     */
     handleActiveClose() {
      this.$multiTab.close(this.$route.fullpath)
    },
    /**
     * 初始化表格
     */
    async initInfo() {
      let args = {}
      if (this.businessId) {
        args.id = this.businessId
      } else {
        args.id = this.id
      }
      args.isView = 1
      this.historyId && (args.historyId = this.historyId)
      this.loading = true
      sixMeasures.historyDetail(args).then(res => {
        if (res.data) {
          let datas = res.data
          this.form = datas.projectInfo
          this.form.viewName = this.form.branchCompanyName + '/' + this.form.projectName
          this.details = datas.mapSixMeasuresPlan
        }
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>
<style lang="less" scoped>
.table-item {
  min-height: 50px;
  display: flex;
  align-items: center;
  /deep/.ant-form-item {
    .ant-form-item-label {
      display: none;
    }
  }
}
#tableBox /deep/ .ant-form-item .ant-form-item-control-wrapper {
  width: auto;
}
</style>
